import React, { Component } from 'react'
import NavItem from './NavItem/NavItem'
import './NaviBar.less'
import { mainRoutesType } from '../../../routes'
import { RouteComponentProps } from 'react-router-dom'
import { withRouter } from 'react-router-dom'

//props类型
interface IProps extends RouteComponentProps {
    itemList: mainRoutesType[]
}
//state类型
interface IState {
    path: string
}

class NaviBar extends Component<IProps, IState> {
    constructor(props: IProps) {
        super(props)
        this.state = {
            path: this.props.history.location.pathname
        }
    }

    toPage: (path: string) => void = (newPath: string) => {
        this.props.history.push(newPath)
        this.setState({
            path: this.props.history.location.pathname
        })
    }

    render() {
        return (
            <ul className='NaviBar' >
                {/* filter选定需要在导航栏中显示的路由 */}
                {this.props.itemList.filter(item=>item.isNav).map(item => {
                    const selected = item.path === this.props.history.location.pathname
                    return (
                        <NavItem selected={selected} key={item.path} toPage={this.toPage} path={item.path} />
                    )
                })}
            </ul>
        )
    }
}

export default withRouter(NaviBar)
